<template>
	<div class="main">
		<div class="add add-companydir" @click="edit($event)">新增</div>
		<div class="edit" @click="flag = !flag">{{ flag ? '完成' : '编辑' }}</div>
		<eagle-cell-group>
			<template v-for="(item, index) in list">
				<eagle-cell
					:key="index"
					value="内容"
					@click="add(item)"
				>
					<template #title>
						<eagle-image
							style="vertical-align: middle; margin-left: 5px"
							width="16"
							height="16"
							:src="
								require('@/assets/Images/AppIcon/list_icon_opregulation.png')
							"
						/>
						{{ item.DName }}
					</template>
					<template #default>
						<div v-if="flag">
							<span @click.stop="edit($event, item)">
								<eagle-image
									style="vertical-align: middle; margin-left: 5px"
									width="16"
									height="16"
									:src="require('@/assets/Images/AppIcon/icon_list_edit.png')"
								/>
								编辑
							</span>

							<span @click.stop="deleteDir($event, item)">
								<eagle-image
									style="vertical-align: middle; margin-left: 5px"
									width="16"
									height="16"
									:src="require('@/assets/Images/AppIcon/icon_delete.png')"
								/>
								删除
							</span>
						</div>
						<div v-else></div>
					</template>
				</eagle-cell>
			</template>
		</eagle-cell-group>
		<van-dialog
			v-model="show"
			:title="title"
			@confirm="handleConfirm()"
			show-cancel-button
		>
			<eagle-form>
				<eagle-input clickable name="ReviewDate" v-model="form.DName" isInputText></eagle-input>
				<!-- <van-field clickable name="ReviewDate" v-model="form.DName" /> -->
			</eagle-form>
		</van-dialog>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			id: this.$route.query.id,
			list: [],
			form: {},
			title: '',
			already: 0,
			border: false,
			fileList: [],
			filter: {
				dirType: 'Company',
			},
			flag: false,
			show: false,
		}
	},
	created() {
		this.getDetail()
	},
	methods: {
		getDetail() {
			let _this = this;
			_this.$axios
			.get("/TrainRes/GetDirs",{params:_this.filter})
			.then((res)=>{
				_this.list = res.data
			})
		},
		submit() {
			let _this = this;
			_this.$axios
			.post("/TrainRes/AddToCompanyFromCenter",param)
			.then((res)=>{
				_this.$toast('保存成功')
				_this.getDetail()
			})
			.catch((err) => {
				console.log('err', err)
			})
		},
		// add
		add(item) {
			let _this = this;
			_this.$axios
			.post("/TrainRes/AddToCompanyFromCenter",{ ID: this.id, Code: item.DCode })
			.then((res) => {
				_this.$toast.success('添加成功')
				setTimeout(() => {
					_this.$router.goRefresh(-1);
				}, 500)
			})
			.catch((err) => {
				console.log('err', err)
			})
		},
		edit(e, item) {
			e.stopPropagation()

			if (item) {
				this.title = '修改目录名称'
				this.form.DName = item.DName
				this.form.DCode = item.DCode
			} else {
				this.title = '目录名称'
				this.form = {}
			}

			this.show = true
		},
		handleConfirm() {
			let _this = this;
			if (_this.form.DCode) {
				_this.$axios
				.post("/TrainRes/UpdateCompanyDir",_this.form)
				.then((res) => {
					_this.$toast.success('编辑成功！')
					_this.getDetail()
				})
			} else {
				_this.$axios
				.post("/TrainRes/AddCompanyDir",this.form)
				.then((res) => {
					_this.$toast.success('新增成功！')
					_this.getDetail()
				})
			}
		},

		// 删除
		deleteDir(e, item) {
			console.log(e, 'e')
			e.stopPropagation()
			const _this = this
			_this.$dialog
				.confirm({
					title: '询问',
					message: '确认要删除该条目录吗',
				})
				.then(() => {
					_this.$axios.get("/TrainRes/DeleteCompanyDir",{params:{ code: item.DCode }})
					.then((res)=>{
						_this.$toast('删除成功!')
						_this.getDetail()
					})
				})
				.catch(() => {
					// on cancel
				})
		},
	},
}
</script>

<style lang="less" >
.add-companydir.add {
	right: 60px;
}
</style>
<style lang="less" scoped>
/*
        .main {
            height: 100vh;
        }
    */
.van-card__thumb {
	width: 60px;
	height: 60px;
}
.van-card__content {
	min-height: 65px;
}

.progress {
	background-color: #fff;
	font-size: 12px;
	.viewcount {
		padding: 8px;
	}
}

.edit {
	position: fixed;
	top: 15px;
	right: 10px;
	color: #fff;
	font-size: 16px;
	z-index: 9999;
}
.det_top_box {
	padding: 10px;
	background-color: #e8f1f8;
}

.detail_header {
	color: #ffffff;
	background: url('../../../assets/Images/AppIcon/image_riskunit_detail_bg.png');
	background-size: cover;
	padding: 10px;
	border-radius: 5px;
	/*background-color: #fff;*/

	.det_top {
		display: flex;
		justify-content: space-between;

		.dep_top_img {
			height: 20px;
			width: 20px;
			margin-right: 5px;
		}
	}

	.det_name {
		margin-top: 20px;
		text-align: center;
	}

	.det_location {
		text-align: center;
		margin-bottom: 20px;
	}
}
.det_tab {
	padding: 10px;
	.det_tab_item {
		padding: 10px 0;
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 10px;

		.det_tab_item_text {
			padding: 0 10px;
		}
	}
}

.text_box {
	padding: 10px;
	border-radius: 5px;
	/*background-color: #e8f1f8;*/
	margin-bottom: 10px;

	.text_top {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		.top_link {
			color: #1989fa;
		}
	}

	.text_item {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;

		.item_link {
			color: #1989fa;
		}
	}

	.text_img {
		display: flex;
		align-items: center;

		.img_item {
			width: 33.3%;
			text-align: center;

			img {
				height: 25px;
				width: 25px;
				margin-bottom: 10px;
			}
		}
	}

	.text_history {
		display: flex;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.text_member {
		color: #1989fa;
		margin-bottom: 10px;
	}

	.text_total_img {
		display: flex;
		align-items: center;

		.img_item {
			width: 33.3%;
			text-align: center;

			.img_item_top {
				display: flex;
				vertical-align: middle;
				margin-bottom: 10px;
			}
			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
	.text_record_list {
		.list_row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
			> div {
				width: 33.3%;
			}
			.row_center {
				text-align: center;
			}
			.row_right {
				text-align: right;
			}
		}
	}
}
.operate_det {
	background-color: #fff;
	padding: 10px;
	.operate_list {
		border: 1px solid #e8f1f8;
		.operate_row_first {
			padding: 10px;
			background-color: #e8f1f8;
			border-bottom: 1px solid #e8f1f8;
			margin-bottom: 10px;
		}
		.operate_row {
			padding: 10px;
			border-bottom: 1px solid #e8f1f8;
			/*margin-bottom: 10px;*/
		}
	}
}

.bottom-btns {
	display: flex;
	width: 100%;
	position: fixed;
	bottom: 0px;
	background-color: #fff;
	.title {
		width: 100%;
		height: 30px;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
